<template>
	<view class="container">
		<textarea maxlength="150" :value="peopleinfo.introduction" @input="inputchange" placeholder="请输入个人介绍"/>
		<view class="tip">{{peopleinfo.introduction.length}}/150</view>
	</view>
	<view class="bottom">
		<view @click="queren()" class="button">保存</view>
	</view>
</template>

<script lang="ts" setup>
	import {onShow} from "@dcloudio/uni-app"
	import {ref} from "vue"
	import http from "@/utils/request.js"
	let peopleinfo=ref({})
	onShow(()=>{
		peopleinfo.value=uni.getStorageSync('peopleinfo')
	})
	
	function queren(){
		if(peopleinfo.value.introduction==='')return uni.showToast({
			title:'个人介绍不能为空',
			icon:'none'
		})
		let response=http.post('/people/updatepeople',{peopleinfo:peopleinfo.value})
		response.then(res=>{
			if(res.data.code===200){
				uni.setStorageSync('peopleinfo',peopleinfo.value)
				uni.showToast({
					title:'保存成功',
					duration:1000
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			}
		})
	}
	function inputchange(e){
		peopleinfo.value.introduction=e.detail.value
	}
</script>

<style lang="scss">
.container{
	width: 100%;
	box-sizing: border-box;
	padding: 20rpx;
	display: flex;
	position: relative;
	justify-content: center;
	
	textarea{
		font-size: 34rpx;
		padding:10rpx 20rpx;
		background-color: #fff;
		border-radius: 25rpx;
		width: 90%;
		height: 300rpx;
	}
	
	.tip{
		position: absolute;
		bottom:30rpx;
		right: 45rpx;
		color:#d8d8d8;
	}
}
.bottom{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.button{
			background-color: #f8e177;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fefbea;
			letter-spacing: 0.2em;
			width: 90%;
			height: 70%;
			border-radius: 50rpx;
			
			&:active{
				opacity: 0.7;
			}
		}
	}
</style>
